<!DOCTYPE html>
<html lang="en">
  <head>
    <title>Wave Class Reference</title>
    <link rel="stylesheet" type="text/css" href="../css/jazzy.css" />
    <link rel="stylesheet" type="text/css" href="../css/highlight.css" />
    <meta charset="utf-8">
    <script src="../js/jquery.min.js" defer></script>
    <script src="../js/jazzy.js" defer></script>
    
    <script src="../js/lunr.min.js" defer></script>
    <script src="../js/typeahead.jquery.js" defer></script>
    <script src="../js/jazzy.search.js" defer></script>
  </head>
  <body>

    <a name="//apple_ref/swift/Class/Wave" class="dashAnchor"></a>

    <a title="Wave Class Reference"></a>

    <header class="header">
      <p class="header-col header-col--primary">
        <a class="header-link" href="../index.html">
          Wave
        </a>
         (100% documented)
      </p>
    
      <div class="header-col--secondary">
        <form role="search" action="../search.json">
          <input type="text" placeholder="Search documentation" data-typeahead>
        </form>
      </div>
    
    
    </header>

    <p class="breadcrumbs">
      <a class="breadcrumb" href="../index.html"> Reference</a>
      <img class="carat" src="../img/carat.png" alt=""/>
      Wave Class Reference
    </p>

    <div class="content-wrapper">
      <nav class="navigation">
        <ul class="nav-groups">
          <li class="nav-group-name">
            <a class="nav-group-name-link" href="../Classes.html">Classes</a>
            <ul class="nav-group-tasks">
              <li class="nav-group-task">
                <a class="nav-group-task-link" href="../Classes/LayerAnimator.html">LayerAnimator</a>
              </li>
              <li class="nav-group-task">
                <a class="nav-group-task-link" href="../Classes/Spring.html">Spring</a>
              </li>
              <li class="nav-group-task">
                <a class="nav-group-task-link" href="../Classes/SpringAnimator.html">SpringAnimator</a>
              </li>
              <li class="nav-group-task">
                <a class="nav-group-task-link" href="../Classes/SpringAnimator/Event.html">– Event</a>
              </li>
              <li class="nav-group-task">
                <a class="nav-group-task-link" href="../Classes/ViewAnimator.html">ViewAnimator</a>
              </li>
              <li class="nav-group-task">
                <a class="nav-group-task-link" href="../Classes/Wave.html">Wave</a>
              </li>
            </ul>
          </li>
          <li class="nav-group-name">
            <a class="nav-group-name-link" href="../Enums.html">Enumerations</a>
            <ul class="nav-group-tasks">
              <li class="nav-group-task">
                <a class="nav-group-task-link" href="../Enums/AnimationMode.html">AnimationMode</a>
              </li>
              <li class="nav-group-task">
                <a class="nav-group-task-link" href="../Enums/AnimatorState.html">AnimatorState</a>
              </li>
            </ul>
          </li>
          <li class="nav-group-name">
            <a class="nav-group-name-link" href="../Extensions.html">Extensions</a>
            <ul class="nav-group-tasks">
              <li class="nav-group-task">
                <a class="nav-group-task-link" href="../Extensions/CALayer.html">CALayer</a>
              </li>
              <li class="nav-group-task">
                <a class="nav-group-task-link" href="../Extensions/CGFloat.html">CGFloat</a>
              </li>
              <li class="nav-group-task">
                <a class="nav-group-task-link" href="../Extensions/CGPoint.html">CGPoint</a>
              </li>
              <li class="nav-group-task">
                <a class="nav-group-task-link" href="../Extensions/CGRect.html">CGRect</a>
              </li>
              <li class="nav-group-task">
                <a class="nav-group-task-link" href="../Extensions/CGSize.html">CGSize</a>
              </li>
              <li class="nav-group-task">
                <a class="nav-group-task-link" href="../Extensions.html#/s:4Wave14RGBAComponentsV">RGBAComponents</a>
              </li>
              <li class="nav-group-task">
                <a class="nav-group-task-link" href="../Extensions/UIView.html">UIView</a>
              </li>
              <li class="nav-group-task">
                <a class="nav-group-task-link" href="../Extensions/WaveColor.html">WaveColor</a>
              </li>
            </ul>
          </li>
          <li class="nav-group-name">
            <a class="nav-group-name-link" href="../Functions.html">Functions</a>
            <ul class="nav-group-tasks">
              <li class="nav-group-task">
                <a class="nav-group-task-link" href="../Functions.html#/s:4Wave4clip5value5lower5upperxx_xxtSFRzlF">clip(value:lower:upper:)</a>
              </li>
              <li class="nav-group-task">
                <a class="nav-group-task-link" href="../Functions.html#/s:4Wave8clipUnit5valuexx_tSFRzlF">clipUnit(value:)</a>
              </li>
              <li class="nav-group-task">
                <a class="nav-group-task-link" href="../Functions.html#/s:4Wave8mapRange_____4clipxx_xxxxSbtSFRzlF">mapRange(_:_:_:_:_:clip:)</a>
              </li>
              <li class="nav-group-task">
                <a class="nav-group-task-link" href="../Functions.html#/s:4Wave8mapRange5value5inMin0E3Max03outF00hG04clipxx_xxxxSbtSFRzlF">mapRange(value:inMin:inMax:outMin:outMax:clip:)</a>
              </li>
              <li class="nav-group-task">
                <a class="nav-group-task-link" href="../Functions.html#/s:4Wave7project5point8velocity16decelerationRateSo7CGPointVAG_AG12CoreGraphics7CGFloatVtF">project(point:velocity:decelerationRate:)</a>
              </li>
              <li class="nav-group-task">
                <a class="nav-group-task-link" href="../Functions.html#/s:4Wave7project5value8velocity16decelerationRate12CoreGraphics7CGFloatVAH_A2HtF">project(value:velocity:decelerationRate:)</a>
              </li>
              <li class="nav-group-task">
                <a class="nav-group-task-link" href="../Functions.html#/s:4Wave10rubberband5value5range8interval1c12CoreGraphics7CGFloatVAI_SNyAIGA2ItF">rubberband(value:range:interval:c:)</a>
              </li>
            </ul>
          </li>
          <li class="nav-group-name">
            <a class="nav-group-name-link" href="../Protocols.html">Protocols</a>
            <ul class="nav-group-tasks">
              <li class="nav-group-task">
                <a class="nav-group-task-link" href="../Protocols/SpringInterpolatable.html">SpringInterpolatable</a>
              </li>
              <li class="nav-group-task">
                <a class="nav-group-task-link" href="../Protocols/VelocityProviding.html">VelocityProviding</a>
              </li>
            </ul>
          </li>
          <li class="nav-group-name">
            <a class="nav-group-name-link" href="../Typealiases.html">Type Aliases</a>
            <ul class="nav-group-tasks">
              <li class="nav-group-task">
                <a class="nav-group-task-link" href="../Typealiases.html#/WaveColor">WaveColor</a>
              </li>
              <li class="nav-group-task">
                <a class="nav-group-task-link" href="../Typealiases.html#/s:4Wave0A5Colora">WaveColor</a>
              </li>
            </ul>
          </li>
        </ul>
      </nav>
      <article class="main-content">

        <section class="section">
          <div class="section-content top-matter">
            <h1>Wave</h1>
              <div class="declaration">
                <div class="language">
                  
                  <pre class="highlight swift"><code><span class="kd">public</span> <span class="kd">class</span> <span class="kt">Wave</span></code></pre>

                </div>
              </div>
            
          </div>
        </section>

        <section class="section">
          <div class="section-content">
            <div class="task-group">
              <div class="task-name-container">
                <a name="/Block-Based%20Animation"></a>
                <a name="//apple_ref/swift/Section/Block-Based Animation" class="dashAnchor"></a>
                <div class="section-name-container">
                  <a class="section-name-link" href="#/Block-Based%20Animation"></a>
                  <h3 class="section-name"><span>Block-Based Animation</span>
</h3>
                </div>
              </div>
              <ul class="item-container">
                <li class="item">
                  <div>
                    <code>
                    <a name="/s:4WaveAAC7animate10withSpring4mode5delay15gestureVelocity10animations10completionyAA0D0C_AA13AnimationModeOSdSo7CGPointVSgyyXEySb_SbtcSgtFZ"></a>
                    <a name="//apple_ref/swift/Method/animate(withSpring:mode:delay:gestureVelocity:animations:completion:)" class="dashAnchor"></a>
                    <a class="token" href="#/s:4WaveAAC7animate10withSpring4mode5delay15gestureVelocity10animations10completionyAA0D0C_AA13AnimationModeOSdSo7CGPointVSgyyXEySb_SbtcSgtFZ">animate(withSpring:<wbr>mode:<wbr>delay:<wbr>gestureVelocity:<wbr>animations:<wbr>completion:<wbr>)</a>
                    </code>
                  </div>
                  <div class="height-container">
                    <div class="pointer-container"></div>
                    <section class="section">
                      <div class="pointer"></div>
                      <div class="abstract">
                        <p>Performs animations based on the <code><a href="../Classes/Spring.html">Spring</a></code> value provided.</p>

<p><strong>Note</strong>: For animations to work correctly, you must set values on the view&rsquo;s <code>animator</code>, not just the view itself. For example, to animate a view&rsquo;s alpha, use <code>myView.animator.alpha = 1.0</code> instead of <code>myView.alpha = 1.0</code>.</p>

<p>For a full list of the various <code>UIView</code> and <code>CALayer</code> animatable properties that Wave supports, see <code><a href="../Classes/ViewAnimator.html">ViewAnimator</a></code> and <code><a href="../Classes/LayerAnimator.html">LayerAnimator</a></code>.</p>

<p><strong>Example Usage:</strong></p>
<pre class="highlight swift"><code><span class="k">let</span> <span class="nv">box</span> <span class="o">=</span> <span class="kt">UIView</span><span class="p">(</span><span class="nv">frame</span><span class="p">:</span> <span class="kt">CGRect</span><span class="p">(</span><span class="nv">x</span><span class="p">:</span> <span class="mi">0</span><span class="p">,</span> <span class="nv">y</span><span class="p">:</span> <span class="mi">0</span><span class="p">,</span> <span class="nv">width</span><span class="p">:</span> <span class="mi">50</span><span class="p">,</span> <span class="nv">height</span><span class="p">:</span> <span class="mi">50</span><span class="p">))</span>
<span class="n">view</span><span class="o">.</span><span class="nf">addSubview</span><span class="p">(</span><span class="n">box</span><span class="p">)</span>
<span class="n">box</span><span class="o">.</span><span class="n">backgroundColor</span> <span class="o">=</span> <span class="o">.</span><span class="n">systemMint</span>

<span class="kt">Wave</span><span class="o">.</span><span class="nf">animateWith</span><span class="p">(</span><span class="nv">spring</span><span class="p">:</span> <span class="kt">Spring</span><span class="p">(</span><span class="nv">dampingRatio</span><span class="p">:</span> <span class="mf">0.6</span><span class="p">,</span> <span class="nv">response</span><span class="p">:</span> <span class="mf">1.2</span><span class="p">))</span> <span class="p">{</span>
   <span class="c1">// Animate some `UIView` properties</span>
   <span class="n">box</span><span class="o">.</span><span class="n">animator</span><span class="o">.</span><span class="n">center</span> <span class="o">=</span> <span class="n">view</span><span class="o">.</span><span class="n">center</span>
   <span class="n">box</span><span class="o">.</span><span class="n">animator</span><span class="o">.</span><span class="n">backgroundColor</span> <span class="o">=</span> <span class="o">.</span><span class="n">systemBlue</span>

   <span class="c1">// And one on `CALayer`</span>
   <span class="n">box</span><span class="o">.</span><span class="n">layer</span><span class="o">.</span><span class="n">animator</span><span class="o">.</span><span class="n">cornerRadius</span> <span class="o">=</span> <span class="mf">10.0</span>
<span class="p">}</span>
</code></pre>

                      </div>
                      <div class="declaration">
                        <h4>Declaration</h4>
                        <div class="language">
                          <p class="aside-title">Swift</p>
                          <pre class="highlight swift"><code><span class="kd">public</span> <span class="kd">static</span> <span class="kd">func</span> <span class="nf">animate</span><span class="p">(</span>
    <span class="n">withSpring</span> <span class="nv">spring</span><span class="p">:</span> <span class="kt"><a href="../Classes/Spring.html">Spring</a></span><span class="p">,</span>
    <span class="nv">mode</span><span class="p">:</span> <span class="kt"><a href="../Enums/AnimationMode.html">AnimationMode</a></span> <span class="o">=</span> <span class="o">.</span><span class="n">animated</span><span class="p">,</span>
    <span class="nv">delay</span><span class="p">:</span> <span class="kt">TimeInterval</span> <span class="o">=</span> <span class="mi">0</span><span class="p">,</span>
    <span class="nv">gestureVelocity</span><span class="p">:</span> <span class="kt">CGPoint</span><span class="p">?</span> <span class="o">=</span> <span class="kc">nil</span><span class="p">,</span>
    <span class="nv">animations</span><span class="p">:</span> <span class="p">(()</span> <span class="o">-&gt;</span> <span class="kt">Void</span><span class="p">),</span>
    <span class="nv">completion</span><span class="p">:</span> <span class="p">((</span><span class="n">_</span> <span class="nv">finished</span><span class="p">:</span> <span class="kt">Bool</span><span class="p">,</span> <span class="n">_</span> <span class="nv">retargeted</span><span class="p">:</span> <span class="kt">Bool</span><span class="p">)</span> <span class="o">-&gt;</span> <span class="kt">Void</span><span class="p">)?</span> <span class="o">=</span> <span class="kc">nil</span><span class="p">)</span></code></pre>

                        </div>
                      </div>
                      <div>
                        <h4>Parameters</h4>
                        <table class="graybox">
                          <tbody>
                            <tr>
                              <td>
                                <code>
                                <em>spring</em>
                                </code>
                              </td>
                              <td>
                                <div>
                                  <p>The <code><a href="../Classes/Spring.html">Spring</a></code> used to determine the timing curve and duration of the animation. See the initializer <code>Spring(dampingRatio:response:mass)</code> for more information on how to choose relevant spring values.</p>
                                </div>
                              </td>
                            </tr>
                            <tr>
                              <td>
                                <code>
                                <em>mode</em>
                                </code>
                              </td>
                              <td>
                                <div>
                                  <p><em>Optional</em>. Determines if the <code>animations</code> block will be run with animation (default), or non-animatedly. See <code><a href="../Enums/AnimationMode.html">AnimationMode</a></code> for information on when to use a non-animated mode.</p>
                                </div>
                              </td>
                            </tr>
                            <tr>
                              <td>
                                <code>
                                <em>delay</em>
                                </code>
                              </td>
                              <td>
                                <div>
                                  <p><em>Optional</em>.  A delay, in seconds, after which to start the animation.</p>
                                </div>
                              </td>
                            </tr>
                            <tr>
                              <td>
                                <code>
                                <em>gestureVelocity</em>
                                </code>
                              </td>
                              <td>
                                <div>
                                  <p><em>Optional</em>. If provided, this value will be used to set the <code>velocity</code> of whatever underlying animations run in the <code>animations</code> block. This should be primarily used to &ldquo;inject&rdquo; the velocity of a gesture recognizer (when the gesture ends) into the animations.</p>
                                </div>
                              </td>
                            </tr>
                            <tr>
                              <td>
                                <code>
                                <em>animations</em>
                                </code>
                              </td>
                              <td>
                                <div>
                                  <p>A block containing the changes to your views&rsquo; animatable properties. Note that for animations to work correctly, you must set values on the view&rsquo;s <code>animator</code>, not just the view itself. For example, to animate a view&rsquo;s alpha, use <code>myView.animator.alpha = 1.0</code> instead of <code>myView.alpha = 1.0</code>.</p>
                                </div>
                              </td>
                            </tr>
                            <tr>
                              <td>
                                <code>
                                <em>completion</em>
                                </code>
                              </td>
                              <td>
                                <div>
                                  <p>A block to be executed when the specified animations have either finished <em>or</em> retargeted to a new value.</p>
                                </div>
                              </td>
                            </tr>
                          </tbody>
                        </table>
                      </div>
                    </section>
                  </div>
                </li>
              </ul>
            </div>
          </div>
        </section>

      </article>
    </div>
    <section class="footer">
      <p>&copy; 2022 <a class="link" href="https://github.com/jtrivedi" target="_blank" rel="external noopener">Janum Trivedi</a>. All rights reserved. (Last updated: 2022-11-14)</p>
      <p>Generated by <a class="link" href="https://github.com/realm/jazzy" target="_blank" rel="external noopener">jazzy ♪♫ v0.14.2</a>, a <a class="link" href="https://realm.io" target="_blank" rel="external noopener">Realm</a> project.</p>
    </section>
  </body>
</html>
